<!-- 活动类型管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="()=>{ searchData = {} }">
        <!-- <GzTextUp placeholder="活动类型ID" v-model:value="searchData['activityTypeId']"/> -->
        <GzTextUp v-model:value="searchData['goodsName']" placeholder="商品名称" />
      </GzSearchForm>
  
      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="activityTypeId"
        :scrollX="800"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'goodsImg'">
            <a-image :src="record.goodsImg" />
          </template>
          <template v-if="column.key == 'goodsPrice'">
            <span>{{ record.goodsPrice/100 }}</span>
          </template>
          <template v-if="column.key == 'marketPrice'">
            <span>{{ record.marketPrice/100 }}</span>
          </template>
          <template v-if="column.key == 'type'">
            <template v-if="record.type == 0">卡密商品</template>
            <template v-if="record.type == 1">代充商品</template>
          </template>
          <template v-if="column.key == 'isSubscribe'">
            <template v-if="record.isSubscribe == 0">否</template>
            <template v-if="record.isSubscribe == 1">是</template>
          </template>
          <template v-if="column.key == 'state'">
            <template v-if="record.state == 0">下架中</template>
            <template v-if="record.state == 1">售出中</template>
            <template v-if="record.state == 2">已删除</template>
          </template>
          <template v-if="column.key == 'operation'">
            <!-- <a-button  type="link"  >入库</a-button> -->
            <a-button v-if="$access('ENT_VIRTUAL_OUTER_ADD')" type="link" @click="addOrEditFunc(record)">添加到内部商品</a-button>
            <a-button v-if="$access('ENT_VIRTUAL_OUTER_SYNC')" type="link" @click="syncDetails(record)">信息同步</a-button>
            <a-button v-if="$access('ENT_VIRTUAL_OUTER_SUBS') && record.isSubscribe == 0" type="link" @click="subscribe(record)">订阅</a-button>
            <a-button v-if="$access('ENT_VIRTUAL_OUTER_SUBS') && record.isSubscribe == 1" type="link" @click="unsubscribe(record)">取消订阅</a-button>
          </template>
        </template>
      </GzTable>
    </a-card>
    <!-- 新增OR修改 -->
    <AddOrEdit ref="addOrEditRef" :callBackFunc="searchFunc" />
  </page-header-wrapper>
</template>
  
  <script lang="ts" setup>
  import AddOrEdit from './AddOrEdit.vue'
  // import { req, API_URL_VIRTUAL_GOODS_OUTSIDE, $activityTypeDelete,$outDetail,$cancelSubscribe } from '@/api/manage'
  import { ref, reactive, getCurrentInstance } from 'vue'
  import {$apiVirtualOutside,$outDetail,$cancelSubscribe,$apiVirtualOutsideGoodsSubscribe} from '@/api/externalGoods/outsidetable/index'
  
  const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
  
  
  const infoTableRef = ref()
  const addOrEditRef = ref()
  
  const tableColumns = reactive([
    { key: 'goodsName', title: '商品名称',dataIndex: 'goodsName' },
    { key: 'goodsImg', title: '商品图片',dataIndex: 'goodsImg' },
    { key: 'goodsPrice', title: '商品进价', dataIndex:'goodsPrice' },
    { key: 'marketPrice', title: '市场价', dataIndex:'marketPrice' },
    { key: 'type', title: '商品类型', dataIndex:'type' },
    { key: 'remark', title: '备注', dataIndex:'remark' },
    { key: 'state', title: '状态', dataIndex:'state' },
    { key: 'isSubscribe', title: '是否订阅中', dataIndex:'isSubscribe' },
    { key: 'operation', width:280, title: '操作', dataIndex: 'operation', align: 'center' }
  ])
  const searchData:any = ref({})
  
  // 请求table接口数据
  function reqTableDataFunc(params: any) {
    return $apiVirtualOutside(params)
  }
  
  function searchFunc() {
    infoTableRef.value.refTable(true)
  }
  // 新增OR修改
  function addOrEditFunc(record){
    addOrEditRef.value.show(record)
  }
  // 删除卡券
  // function activityTypeDelete(activityTypeId){
  //   $infoBox.confirmDanger('确认删除？', '请确认是否删除当前奖品？', () => {
  //     $activityTypeDelete(activityTypeId).then(res => {
  //       $infoBox.message.success('删除成功！')
  //       infoTableRef.value.refTable(true)
  //     })
  //   })
  // }
// 同步详情
  function syncDetails(record:any){
    $infoBox.confirmDanger('确认同步？', '请确认是否同步当前奖品？', () => {
      $outDetail({virtualOutsideId:record.virtualOutsideId}).then(res => {
        $infoBox.message.success('同步成功！')
        infoTableRef.value.refTable(true)
      })
    })
  }
  // 取消订阅
  function unsubscribe(record:any){    
    $infoBox.confirmDanger('确认取消订阅？', '请确认是否取消订阅当前奖品？', () => {
      $cancelSubscribe({virtualOutsideId:record.virtualOutsideId}).then(res => {
        $infoBox.message.success('取消订阅成功！')
        infoTableRef.value.refTable(true)
      })
    })
  }

    // 取消订阅
    function subscribe(record:any){    
    $infoBox.confirmDanger('确认订阅？', '请确认是否订阅当前奖品？', () => {
      $apiVirtualOutsideGoodsSubscribe({virtualOutsideId:record.virtualOutsideId}).then(res => {
        $infoBox.message.success('订阅成功！')
        infoTableRef.value.refTable(true)
      })
    })
  }
  </script>
  <style lang="less" scoped>
    :deep(img){
    width: 80px;
    height: 80px;
    object-fit: cover;
  }
  </style>